<template>
  <ul class="list-item">
    <li v-for="(item, index) in dataList" plain @click="!examList[index].flag && timeOver()">
      <div class="item" @click="examList[index].flag && listClick(index)">
        <div class="tag-icon" :class="types"></div>

        <div class="tag-info">
          <div v-if="listSelect == select" class="list2">
            <p class="name">{{item.title}}</p>
            <p class="status" v-if="item.status == 2">已完成</p>
            <p class="status" v-else>未完成</p>
          </div>

          <div v-else class="list1">
            <p class="title" @click="signClick(index)">{{item.title}}</p>
            <p class="status" style="display:none;">{{item.sign}}</p>
          </div>
        </div>

        <div class="tag-time" v-show="timeShow">
          <span v-if="item.startTime != null">{{item.startTime}}</span>
          <span v-else>{{showTime}}</span>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'ListItem',
  data() {
    return {
      listSelect: 0,
      minute: 0,
      hour: 0,
      showTime: null,
      examList: [],
      showMsg: false,
    };
  },
  props: {
    dataList: {
      type: Array,
      default() {
        return [];
      },
    },
    select: {
      type: Number,
      default: 0,
    },
    timeShow: {
      type: Boolean,
      default: false,
    },
    types: {
      type: String,
      default: null,
    },
    signed: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    this._timeChange();

    this.examByTime();
  },
  watch: {
    dataList: {
      handler(n, o) {},
    },
  },
  created() {
    for (let i = 0; i < this.dataList.length; i++) {
      this.examList.push({ flag: false });
    }
  },
  methods: {
    /* 签到时间变化 */
    _timeChange() {
      for (const item of this.dataList) {
        let date = item.time * 3600;

        let timer = setInterval(() => {
          if (date != 0) {
            date -= 1;
            this.hour = Math.floor(date / 3600);
            this.minute = Math.floor((date - this.hour * 3600) / 60);
          } else {
            clearInterval(timer);
          }

          if (this.hour != 0 && this.minute == 0) {
            this.showTime = '剩余' + this.hour + '小时';
          } else if (this.hour == 0 && this.minute != 0) {
            this.showTime = '剩余' + this.minute + '小时';
          } else if (this.hour != 0 && this.minute != 0) {
            this.showTime = '剩余' + this.hour + '小时' + this.minute + '分钟';
          } else {
            this.showTime = '时间已到了';
          }
        }, 1000);
      }
    },

    // 判断考试时间
    examByTime() {
      // 当考试未完成的进入考试
      if (this.types == 'exam') {
        // 获取当前时间
        let now = new Date();

        // 判断考试开始时间
        for (let i = 0; i < this.dataList.length; i++) {
          let start_dataTime = this.dataList[i].startTime;

          if (Date.parse(now) >= Date.parse(start_dataTime)) {
            this.examList[i].flag = true;
          }
        }

        // 判断考试到期时间
        for (let i = 0; i < this.dataList.length; i++) {
          let last_dateTime = this.dataList[i].submitTime;

          if (Date.parse(now) >= Date.parse(last_dateTime)) {
            this.examList[i].flag = false;
          }
        }
      }

      // 点击作业进入作业界面
      if (this.types == 'work') {
        for (const iter of this.examList) {
          iter.flag = true; /* 可以直接进入作业界面 */
        }
      }
    },

    // 超时或未开始时点击
    timeOver() {
      const h = this.$createElement;

      this.$notify({
        title: '考试提示信息',
        message: h('i', { style: 'color: teal' }, '考试时间已结束或未开始哟。。。'),
      });
    },

    /* 监听签到的点击 */
    signClick(index) {
      const tag = document.querySelectorAll('.tag-icon');
      const title = document.querySelectorAll('.title');

      // 点击签单进入签单界面
      if (this.types == 'sign' && tag[index].classList.value.indexOf('sign_ok') == -1) {
        // 进入签到界面
        console.log('进入签到界面：/sign', this.dataList[index]);
        if (title[index].innerHTML == '图片签到') {
          this.$emit('signPicClick', true);

          // 签到图标改变
          // console.log(this.signed);

          this._signed(tag[index]);
        } else {
          // 签到图标改变
          tag[index].classList.add('sign_ok');
          console.log('你已经手动签到成功');
        }

        // this.$emit('signClick', 1);
      } else {
        console.log('你已经签到完了');
      }
    },

    _signed(obj) {
      if (this.signed) {
        obj.classList.add('sign_ok');
        console.log('你已经图片签到成功');
      }
    },

    listClick(index) {
      // 当考试未完成的进入考试
      if (this.dataList[index].status == 0 && this.types == 'exam') {
        // 进入考试界面
        console.log('进入考试界面：/exam', this.dataList[index]);
        this.$router.push({ name: 'StudentExam', query: { kind: this.dataList[index].kind, courseId: this.dataList[index].id } });
      }

      // 点击作业进入作业界面
      if (this.types == 'work') {
        // 进入作业界面
        console.log('进入作业界面：/work', this.dataList[index]);
        this.$router.push({ name: 'StudentExam', query: { kind: this.dataList[index].kind, courseId: this.dataList[index].id } });
      }
    },
  },
};
</script>

<style scoped>
.item {
  height: 70px;
  padding-left: 30px;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.tag-icon {
  height: 42px;
  width: 42px;
  background: url(/src/assets/image/CourseMain/icon-sprite.png) no-repeat 0 0;
  background-size: 760%;
}
.tag-info {
  width: 75%;
  height: 70px;
  margin: 0 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f2f2f2;
}
.tag-info .list1 {
  line-height: 70px;
}
.tag-info .list2 {
  margin-top: 15px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tag-info .list2 .status {
  color: #a8a8b3;
  font-size: 12px;
}
.tag-info .title,
.tag-info .name {
  color: #181e33;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tag-time {
  flex: 1;
  text-align: right;
  padding-right: 30px;
  font-size: 12px;
  color: #faaf43;
}

/* 图标 */
.sign {
  background-position: -6px -4px;
}
.work {
  background-position: -112px -4px;
}
.exam {
  background-position: -216px -4px;
}
.sign_ok {
  background-position-x: -58px;
}
.exam_ok {
  background-position-x: -269px;
}
.work_ok {
  background-position-x: -164px;
}
</style>